<template>
  <div>
    <div class="table-bar">
      <p class="page-title">课程管理 > 课程详情</p>
      <div class="object-con-info common-border flex-row-between">
        <img v-if="data.avatar_url" width="260" height="186" :src="data.avatar_url" />
        <div v-else class="object-con-avatar">
          <span>{{data.course_name}}</span>
        </div>
        <div class="obj-name flex-column-between">
          <p>{{data.course_name}}</p>
          <p>上架时间：{{data.create_time}}</p>
          <p>
            <el-button @click="goEditCourse(id)" type="primary">编辑</el-button>
            <el-button @click="onDown" v-if="data.status == 'N'" type="warning">下架</el-button>
            <el-button @click="onUp" v-else type="warning">上架</el-button>
          </p>
        </div>
        <div class="obj-user-count-price flex-column-between">
          <p class="price">￥{{data.price/100}}</p> 
          <p class="obj-user-student-count flex-row-end">
            <img src="../assets/u105.png" width="34" height="34" />
            <span class="title24">{{data.student_count}}</span>
          </p> 
          <p></p>
        </div>
      </div>
      <div class="tabs">
        <div @click="setTab('first')" :class="activeTab == 'first' ? 'active-tab' : ''">内容管理</div>
        <div @click="setTab('second')" :class="activeTab == 'second' ? 'active-tab' : ''">课程介绍 <i @click="goEditCourse(id)" class="el-icon-edit" /></div>
        <div @click="setTab('third')" :class="activeTab == 'third' ? 'active-tab' : ''">用户信息</div>
      </div>
      <div v-if="activeTab == 'first'" class="obj-con-ope-bar">
        <el-button @click="goCreateChapter(id)" type="primary">添加内容</el-button>
      </div>
      <div class="obj-con-detail" v-if="activeTab == 'second'">
        <div v-html="data.describe">
        </div>
      </div>
    </div>
    
    <div v-if="activeTab == 'first'">
      <table cellspacing="0" cellpadding="0" class="obj-con-table">
        <thead>
          <tr>
            <td>内容</td>
            <td>类型</td>
            <td>打开次数</td>
            <td>状态</td>
            <td>上传时间</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(c, i) in chapters" :key="'course' + i">
            <td>{{c.chapter_name}}</td>
            <td>{{chapterDetailLabel(c.detail_type)}}</td>
            <td>{{c.pv}}</td>
            <td>{{courseStatusToLabel(c.status)}}</td>
            <td>{{c.create_time}}</td>
            <td>
              <div>
                <el-button @click="goEditChapter(c.id)" type="primary">编辑</el-button>
                <el-button @click="onChapterDown(c.id)" v-if="c.status == 'N'" type="warning">下架</el-button>
                <el-button @click="onChapterUp(c.id)" v-else type="warning">上架</el-button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div v-if="activeTab == 'third'">
      <table cellspacing="0" cellpadding="0" class="obj-con-table">
        <thead>
          <tr>
            <td>用户</td>
            <td>购买时间</td>
            <td>停留时长</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(s, i) in students" :key="'course-students' + i">
            <td>{{s.stu_name}}</td>
            <td>{{s.choose_time}}</td>
            <td>{{s.stay_sec}}秒</td>
          </tr>
        </tbody>
      </table>
    </div>
    
  </div>
</template>
<script>
import goBack from "@/mixins/goBack";
import { courseModel } from "../api/models";
import CreateFilter from '@/mixins/CreateFilter.js';
import selects from '@/common/selects.js';
import tabMixin from '@/mixins/tabMixin.js';
import goMixin from '@/mixins/goMixin.js'
import {WConfirm} from '@/utils/utils.js'
import { Message } from 'element-ui';
export default {
  mixins: [goBack, CreateFilter, tabMixin, goMixin],
  components: {},
  data() {
    return {
      data: {},
      id: null,
      chapters: [],
      chapter_detail_types: selects.chapter_detail_types,
      students: [],
      loading: false
    };
  },
  mounted() {
    this.id = parseInt(this.$route.params.id);
    this.getItem();
    this.fetchChapter();
  },
  methods: {
    getItem() {
      courseModel.item(this.id, res => {
        res.data.courseTypeLabel = this.courseTypeToLabel(res.data.course_type);
        res.data.courseStatusLabel= this.courseStatusToLabel(res.data.course_status);
        this.data = res.data
      });
    },
    fetchChapter() {
      courseModel.chapters(this.id, res => {
        this.chapters = res.data
      });
    },
    afterSetTab() {
      if (this.activeTab == 'third') {
        courseModel.students(this.id, {}, res => {
          this.students = res.data
        })
      }
    },
    batchBlock(status) {
      courseModel.batchBlock({
        ids: [this.id],
        status: status
      }, (res) => {
        this.loading = false
        Message.success(res.message)
        this.getItem()
      }, err => {
        this.loading = false
        Message.warning(err.message)
      })
    },
    batchBlockChapter(id, status) {
      courseModel.batchBlockChapter({
        ids: [id],
        status: status
      }, (res) => {
        this.loading = false
        Message.success(res.message)
        this.fetchChapter()
      }, err => {
        this.loading = false
        Message.warning(err.message)
      })
    },
    onUp() {
      // 上架
      WConfirm('确定上架课程', () => {
        if (this.loading) return;
        this.batchBlock('N')
      })
    },
    onDown() {
      WConfirm('确定下架课程', () => {
        if (this.loading) return;
        this.batchBlock('C')
      })
    },
    onChapterUp(id) {
      // 上架
      WConfirm('确定上架该章节', () => {
        if (this.loading) return;
        this.batchBlockChapter(id, 'N')
      })
    },
    onChapterDown(id) {
      WConfirm('确定下架该章节', () => {
        if (this.loading) return;
        this.batchBlockChapter(id, 'C')
      })
    }
  }
};
</script>
<style scoped lang="scss">
  .el-tree-div{
    margin-left: 10px;
    border: 1px solid #cccccc;
    padding: 20px;
    width: 80%;
  }
  
</style>